﻿<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>层次渐变</title>

<style>
body,h1,h2,h3,h4,h5,h6,p,ol,ul,dl,dd,td,th,form,input,select,textarea{margin:0;padding:0; font-size:12px;}
a{text-decoration:none;outline:none;}
img{vertical-align:top;border:none;}
li{list-style:none;}
table{border-collapse:collapse;}
textarea{resize:none; outline:none; overflow:auto;}

.clear{zoom:1;}
.clear:after{content:''; display:block;clear:both;}
/* css reset */
#wrap{ width:830px;height:250px;margin:50px auto;}
#wrap li{float:left; height:200px; width:160px;border:2px solid #333; padding:1px;}
#wrap img{ width:100%;height:100%;}
#wrap #btn{text-align:center;}
#btn input{ height:20px;width:30px; margin:10px 0;}

#page{position:absolute;top:400px;left:50%;margin-left:-75px;}
#page li{float:left;width:30px;height:20px;}
#page li a{font-size:14px;}
#page li a:link{color:#000;}
#page li a:visited{color:#06F;}
#page li a:hover{text-decoration:underline;}
#page li a:active{color:#EF1B7A}
</style>
<script src="move.js" type="text/javascript"></script>
<script>
window.onload=function(){
	var arr=["img/1.jpg","img/2.jpg","img/3.jpg","img/4.jpg","img/5.jpg"];
		var aUl=document.getElementsByTagName('ul')[0];
		var aLi=aUl.getElementsByTagName('li');
		var aImg=aUl.getElementsByTagName('img');
		var aBtn=document.getElementsByTagName('input');
		var timer=null;
		

		function pic(){
			var i=0;
			if(i<4){
				timer=setInterval(function(){
					aImg[i].style.opacity=0;
					aImg[i].style.filter='filter(alpha=+'+0+')';
					aImg[i].src=arr[i];
					startMove(aImg[i],{opacity:100});
					i++;
				},100)
			}else{
				clearInterval(timer);
			};
		};
		
		aBtn[0].onclick=function(){
			arr.push(arr[0]);
			arr.shift();
			pic();
		};
		aBtn[1].onclick=function(){
			arr.unshift(arr[arr.length-1]);
			arr.pop();
			pic();
		}
}
	


</script>
</head>

<body>
<div id="wrap">
    <ul>
        <li><img src="img/1.jpg" alt=""/></li>
        <li><img src="img/2.jpg" alt=""/></li>
        <li><img src="img/3.jpg" alt=""/></li>
        <li><img src="img/4.jpg" alt=""/></li>
        <li><img src="img/5.jpg" alt=""/></li>
    </ul>
    <div id="btn">
        <input type="button" value="<<"/>
        <input type="button" value=">>"/>
    </div>
</div>
<ul id="page">
	<li><a href="1.html">【1】</a></li>
    <li><a href="2.html">【2】</a></li>
    <li><a href="3.html">【3】</a></li>
    <li><a href="4.html">【4】</a></li>
    <li><a href="#">【5】</a></li>
</ul>
</body>
</html>
